
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Arc Wave Animation</title>  
    <style>
        /* 设置基本样式和容器 */  
body {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    margin: 0;  
    background-color: #2e2f2f; /* 背景颜色 */  
}  
.word{
    position: absolute;  
    top: 105px;  
    left: 50px;  
    color: white;
    font-weight: 700;
    font-size: 20px;
    
}
  
/* 容器样式 */  
.water-container {  
    position: relative; /* 相对于正常文档流进行定位 */  
    width: 300px; /* 容器宽度 */  
    height: 150px; /* 容器高度，包含波浪和水的高度 */  
    overflow: hidden; /* 隐藏超出容器的部分 */  
   
}  
  
/* 波浪样式 */  
.wave {  
    border-radius: 5%;
    position: absolute; /* 绝对定位相对于最近的非static定位的祖先元素 */  
    bottom: 0; /* 波浪紧贴着容器的底部 */  
    width: 50%; /* 波浪宽度等于容器宽度 */  
    height: 200px; /* 波浪的高度 */  
    background: rgb(10, 170, 219); /* 波浪颜色 */  
    /*border-radius: 50% / 100%; /* 顶部半圆形，底部直线，创建弧形效果 */  
    overflow: hidden; /* 确保弧形之外的背景色不溢出 */  
    
    animation: wave-animation 2s ease-in-out infinite; /* 应用波浪动画 */  
}  
  
/* 水的部分样式 */  
.water-container h2{  
    position: absolute; /* 绝对定位 */  
    display: flex;  
    flex-direction: column;  
}  
  
/* 波浪动画的CSS定义 */  
@keyframes wave-animation {  
    0%,100%{  
        clip-path: polygon(0 65%, 18% 71%, 33% 72%, 49% 71%, 70% 65%, 85% 66%, 100% 71%, 100% 100%, 0 100%);/* 波浪起始位置 */  
    }  
    50% {  
        clip-path: polygon(0 65%, 15% 62%, 31% 63%, 53% 70%, 69% 72%, 85% 70%, 100% 66%, 100% 100%, 0 100%);/* 波浪上浮的幅度 */  
    } 
    
    
}
    </style>
</head>  
<body>  
    <div class="water-container">  
        <div class="wave"></div>  
        <div class="word">水波纹</div>
    </div>  
  
</body>  
</html>